<script setup>
    import {userStore} from "../../stores/userStore";
    import Weather from "../../components/Weather.vue";

    const store=userStore();

    const user = {
        name: store.user.username,
        gender: store.user.gender,
        job: store.user.job,
        sign: "代码千万行，注释第一行",
        userType: "admin",
    };
    const myArticleList = [];
    const articleList = [];
    const courseList = [
        { name: '语文', city: '北京', price: '600元' },
        { name: '数学', city: '上海', price: '900元' },
        { name: '英语', city: '广州', price: '800元' }
    ];
    const productList = [
        { type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, img: '/images/product01.png' },
        { type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, img: '/images/product02.png' },
        { type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, img: '/images/product03.png' },
        { type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, img: '/images/product04.png' },
        { type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, img: '/images/product05.png' },
        { type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, img: '/images/product06.png' },
    ];

    const logOut = () => {
        store.isLoggedIn=false;
    };
</script>
<template>

    <el-container style="width:80%;margin:20px auto;">
        <el-aside  style="width:20%;margin-top: 20px;">
            <el-card>
                <el-menu :default-active="activeIndex" :ellipsis="false" style="border-bottom: none !important;"> 
                    <el-menu-item index="1">个人主页</el-menu-item>
                    <el-menu-item index="2">个人资料</el-menu-item>
                    <el-menu-item index="3">账号设置</el-menu-item>
                    <el-menu-item index="4">消息设置</el-menu-item>
                    <el-menu-item index="5" v-show="user.userType=='admin'">后台管理</el-menu-item>
                </el-menu>
            </el-card>
        </el-aside>
        <el-main>
            <el-card>
                <el-row>
                    <el-col :span="6" style="display: flex; flex-direction: column; align-items: center;">
                        <img src="/images/avatar.png" style="width: 100px;border-radius: 50%;"/><br><br>
                        <div><router-link to="/4_login"><el-button type="primary" size="small" @click="logOut">退出登录</el-button></router-link></div>
                    </el-col>
                    <el-col :span="12">
                        <h2>{{user.name}}</h2>
                        <div>性别：{{user.gender}} | 岗位：{{user.job}}</div>
                        <div>签名档：{{user.sign}}</div>  
                        <br>
                        <div>
                            <span style="margin-right: 30px;"><b>我的粉丝</b></span>
                            <span><b>我的关注</b></span>
                        </div>                      
                    </el-col>
                    <el-col :span="6">
                        <weather></weather>        
                    </el-col>
                </el-row>
            </el-card>
            <el-card style="margin-top: 10px;">
                <el-tabs>
                    <el-tab-pane label="我发布的文章">
                        <div v-if="myArticleList.length>0">列表数据</div>
                        <el-empty v-else description="暂无数据"></el-empty>
                    </el-tab-pane>
                    <el-tab-pane label="我收藏的文章">
                        <div v-if="articleList.length>0">列表数据</div>
                        <el-empty v-else description="暂无数据"></el-empty>
                    </el-tab-pane>
                    <el-tab-pane label="我收藏的课程">
                        <div v-if="courseList.length>0">
                            <p v-for="item in courseList">
                                <span>名称：{{item.name}}——产地：{{item.city}}——价格：{{item.price}}</span>
                            </p>
                        </div>
                        <el-empty v-else description="暂无数据"></el-empty>
                    </el-tab-pane>
                    <el-tab-pane label="我收藏的商品">
                        <div v-if="productList.length>0">
                            <ul>
                                <li v-for="(product,index) in productList" :key="product.id">
                                    <h3>{{index+1}}-{{product.type}}</h3>
                                    <p>名称：{{product.name}}</p>
                                    <p>价格：￥{{product.price}}</p>
                                    <p><img :src="product.img" style="width: 100px;"/></p>
                                </li>
                            </ul>
                        </div>
                        <el-empty v-else description="暂无数据"></el-empty>
                    </el-tab-pane>
                </el-tabs>
            </el-card>

        </el-main>
    </el-container>

</template>
<style scoped>  
    a{text-decoration: none;}
</style>
